improvement(emails): align the email design tokens with the platform design system - #6479

Summary

The email baseStyles claimed to be "derived from globals.css light mode tokens" but had drifted. I diffed every value against the live platform source (globals.css, tailwind.config.ts, chip-chrome.ts) and corrected it.

Color drift — values that no longer matched their own comment:

• --border is #d8d8d8, emails used #dedede
• --text-muted is #7a7a7a, emails used #707070
• canvas was an off-token #f8f8f8 → --surface-1 #fbfbfb
• added textBody (--text-body #434343) and textInverse (--text-inverse). Body copy was rendering at --text-secondary; the platform's body/value token is --text-body, so paragraph text now matches the app.
• renamed colors.divider → colors.border (the platform retired --divider)

Type scale now mirrors tailwind.config.ts and uses its names (caption/small/sm/base/md), so every size traces to a Tailwind token. Email body stays at md 16px — the one deliberate deviation from the app's 15px base, and still a real token. The single off-scale value (24px OTP/balance figure) is now a named display token with a comment saying why the platform has no equivalent.

Weights: added a fontWeight scale (400/500/600) and removed every fontWeight: 'bold' (=700, off the platform's three-step scale).

Geometry: one RADIUS constant = --radius 8px, which kills the lone borderRadius: '6px' in payment-failed. The CTA now transcribes the platform primary Chip exactly — chipGeometryClass is h-[30px] rounded-lg px-2 text-sm, so button padding went 12px → 8px. Worth an eyeball — the one change where matching the platform makes the email button slightly tighter.

De-duplication:

• extracted ProFeaturesBox — ~55 lines were copy-pasted byte-for-byte between credits-exhausted and free-tier-upgrade, including an uppercase/letter-spaced title and a border (${colors.brandTertiary}20) that existed nowhere else
• new errorBox token — payment-failed was re-typing infoBox's own padding and margin just to swap the fill
• new infoBoxLabel/infoBoxValue — credit-purchase hand-styled four <Text>s inside an otherwise correct infoBox
• new greeting token — 10 files spelled out {...paragraph, marginTop: 0} inline and 8 forgot it entirely; now one token used by all 18
• new footerLink token — the footer hand-rolled its own; deleted the dead baseStyles.footer it never used

Rhythm: limit-threshold, usage-threshold, usage-limit-reached and payment-failed each had a divider fencing off the CTA. Every template is now greeting → body → box → CTA → one divider → footnote.

Type of Change

• Improvement

Testing

Rendered all 16 templates and scanned the emitted HTML for every legacy value — #dedede, #707070, #f8f8f8, border-radius:6px, font-weight:700|bold, text-transform:uppercase, letter-spacing:0.5px: 0 hits across 16 templates. Confirmed the platform values (#d8d8d8, #434343, #7a7a7a, #fbfbfb) are present, and that every template renders exactly one divider and one flush greeting. Source scan shows zero raw hex, zero bold, zero raw radius literals outside base.ts. Tests: 6/6 email + 227/227 mailer & schedule-notification. Type-check clean.

Not visually diffed in a mail client — verification is on rendered HTML, not pixels.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)